<template>
  <ul class="contact-container">
    <li>
      <a target="_blank" :href="data.github">
        <div class="icon">
          <Icon type="github"/>
        </div>
        <span>{{data.githubName}}</span>
      </a>
    </li>
    <li>
      <a :href="`mailto:${data.mail}`">
        <div class="icon">
          <Icon type="mail"/>
        </div>
        <span>{{data.mail}}</span>
      </a>
    </li>
    <li>
      <a href="#">
        <div class="icon">
          <Icon type="qq"/>
        </div>
        <span>{{data.qq}}</span>
      </a>
      <div class="pop">
        <img :src="data.qqQrCode" alt="">
      </div>
    </li>
    <li>
      <a>
        <div class="icon">
          <Icon type="weixin" class="weixin"/>
        </div>
        <span>{{data.weixin}}</span>
      </a>
      <div class="pop">
        <img :src="data.weixinQrCode" alt="">
      </div>
    </li>
  </ul>
</template>

<script>
import Icon from "@/components/Iconfont"
import {mapState} from "vuex";
export default {
  components: {
    Icon,
  },
  data() {
    return {
      
    }
  },
  computed: {
    ...mapState("setting", ["data"])
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
  .contact-container {
    color: @gray;
    padding: 20px;
    @itemHeight: 30px;
    li {
      height: @itemHeight;
      font-size: 14px;
      line-height: 30px;
      margin: 14px 0;
      cursor: pointer;
      position: relative;
      &:hover {
        .pop {
          transform: scaleY(1);
        }
      }
      a {
        display: flex;
        align-items: center;
      }
      .icon {
        width: 30px;
        .iconfont{
          font-size: 26px;
        }
        .weixin {
          font-size: 22px;
          text-indent: -10px;
        }
      }
      .pop {
        position: absolute;
        left: 0;
        bottom: @itemHeight + 4px;
        background: #fff;
        padding: 10px 15px;
        border-radius: 3px;
        transform: scaleY(0);
        transform-origin: center bottom;
        transition: .3s;
        img{
          width: 150px;
          height: 150px;
        }
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          transform: translateX(-50%) rotate(45deg);
          width: 8px;
          height: 8px;
          background: #fff;
          bottom: -4px;
        } 
      }
    }
  }
</style>